<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>9-将div#demo.demo字符串转化成</title>
</head>

<body>
    <script>
        let a = document.querySelector("");//通过css选择器寻找DOM
        // 9-将div#demo.demo字符串转化成<div id="demo" class="demo"></div>
        let className = "div#demo.red";
        let dom = creatQuerySelectorElement(className);  // 通过CSS选择器创建DOM
        dom.innerText = "2333";
        document.body.appendChild(dom);
        console.log(dom);
        function creatQuerySelectorElement(className){
            // 参数中输入div + 类名选择器 / id选择器
            // 会返回一个带选择器中的类名/id的DOM。
            let dom_Type = "";
            let dom_Classname = "";
            let dom_Id = "";
            let type_look = true;
            let class_look = false;
            let id_look = false;
            for(let i = 0;i<className.length;i++){
                if(!class_look && !id_look){
                    if(className[i] === "."){
                        class_look = true;
                        id_look = false;
                        continue;
                    }
                    if(className[i] === "#"){
                        class_look = false;
                        id_look = true;
                        continue;
                    }
                    dom_Type+=className[i];
                } else if(class_look){
                    if(className[i] === "#"){
                        class_look = false;
                        id_look = true;
                        continue;
                    }
                    dom_Classname += className[i];

                } else if(id_look){
                    if(className[i] === "."){
                        class_look = true;
                        id_look = false;
                        continue;
                    }
                    dom_Id += className[i];
                }
            }
            let dom = document.createElement(dom_Type);
            if(dom_Id){
                dom.id = dom_Id;
            }
            if(dom_Classname){
                dom.className = dom_Classname;
            }
            return dom;
        }
    </script>
</body>

</html>